<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="主页demo/js/jquery-3.6.0.min.js"></script>
		<script src="./js/layui/layui.js"></script>
		<link rel="stylesheet" href="./js/layui/css/layui.css" />
		<link rel="stylesheet"  href="css/base.css"/>
		<link rel="stylesheet" href="css/common.css" />
		<style type="text/css">
			#content{
				width: 200px;
				height: 100px;
				border: 1px solid red;
				overflow: hidden;
			}
			#main1{
				width: 170px;
				height: 100px;
				transition: all 0.5s ease-in-out;
				border: 1px solid black;
			}
			#main2{
				width: 200px;
				height: 100px;
				border: 1px solid black;
			}
			
		</style>
	</head>
	<body>
		<div id="content">
			<div id="main1">
				123
				<input type="button" name="" id="" value="上移"  class="upmove"/>
		
			</div>
			<div id="main2">
				456
			<input type="button" name="" id="" value="下移"  class="downmove"/>
			</div>
			
		</div>
		
		
		<script>
			$(function(){
				$(".upmove").click(function(){
						$("#main1").css("margin-top","-100px")
					})
					$(".downmove").click(function(){
							$("#main1").css("margin-top","0px")
						})
				
			})
				
		</script>
	</body>
</html>
